<template>
  <div class="channel-edit">
    <el-dialog
      title="新增/编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      @close="editCancel"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">通道名称:</span>
            <span class="span2">
              <el-input
                v-if="flag == 1"
                v-model="editInfo.channelName"
                placeholder="不超过10个字符"
                maxlength="10"
              ></el-input>
              <el-input
                v-else
                v-model="editInfo.channelName"
                disabled
                placeholder="不超过10个字符"
                maxlength="10"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="span1">服务商:</span>
            <span class="span2">
              <el-select v-if="flag == 1" v-model="editInfo.serviceProviderId" placeholder="请选择服务商">
                <el-option
                  v-for="item in serviceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input v-else disabled v-model="editInfo.serviceProviderName" placeholder="请输入服务商"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">通道账号:</span>
            <span class="span2">
              <el-input
                v-if="flag == 1"
                v-model="editInfo.channelAccount"
                placeholder="不超过20个字符"
                maxlength="20"
              ></el-input>
              <el-input
                v-else
                disabled
                v-model="editInfo.channelAccount"
                placeholder="不超过20个字符"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li v-if="flag == 1">
            <span class="span1">通道密码:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.channelPassword"
                type="password"
                placeholder="请输入密码"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="span1">IP:</span>
            <span class="span2">
              <el-input v-model="editInfo.masterIp" placeholder="请输入IP地址" maxlength="20"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">签名:</span>
            <span class="span2">
              <div class="sign" v-for="item in signName">
                <el-input v-model="item.signName"></el-input>
                <el-button type="text" @click="delSign(item.signName)">删除</el-button>
              </div>
              <el-button type="primary" icon="el-icon-plus" @click="addSign">添加</el-button>
            </span>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["message", "flag"],
  data() {
    return {
      dialogVisible: true,
      editInfo: {},
      serviceOptions: [],
      signCount: 0,
      newSign: "",
      signName: [],
      signNames: [],
      editInfo: {
        channelName: "",
        serviceProviderName: "",
        channelAccount: "",
        masterIp: "",
        channelPassword: "",
        serviceProviderId: "",
      }
    };
  },
  methods: {
    editCancel() {
      let that = this;
      that.editInfo = {};
      that.$emit("channelEdit", {});
    },
    editSure() {
      let that = this;
      //通道名称
      if (!that.editInfo.channelName) {
        that.showMsg("请输入通道名称", "error");
        return;
      }
      //服务商
      if (!that.editInfo.serviceProviderId && that.flag == 1) {
        that.showMsg("请选择服务商", "error");
        return;
      }
      //通道账号
      if (!that.editInfo.channelAccount) {
        that.showMsg("请输入通道账号", "error");
        return;
      }
      //通道密码
      if (that.flag == 1) {
        if (!that.editInfo.channelPassword) {
          that.showMsg("请输入通道密码", "error");
          return;
        } else {
          if (
            !/^[\da-zA-Z!@#$%^&*]{1,20}$/.test(that.editInfo.channelPassword)
          ) {
            that.showMsg("密码需由字母、数字、符号组成", "error");
            return;
          }
        }
      }
      //ip地址
      if (!that.editInfo.masterIp) {
        that.showMsg("请输入IP地址", "error");
        return;
      } else {
        if (
          !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/.test(
            that.editInfo.masterIp
          )
        ) {
          that.showMsg("请输入正确的IP地址", "error");
          return;
        }
      }


      //签名
      if (that.signName) {
        let signName = that.signName;
        signName.forEach(item => {
          that.signNames.push(item.signName);
        });
      }

      if (that.flag == 1) {
        console.log(that.signNames)
        that.ajaxJson({
          url: "/channel/channelManage/addOrEditChannel",
          data: {
            channelName: that.editInfo.channelName,
            channelAccount: that.editInfo.channelAccount,
            channelPassword: that.editInfo.channelPassword,
            serviceProviderId: that.editInfo.serviceProviderId,
            masterIp: that.editInfo.masterIp,
            signNames: that.signNames.join(",")
          },
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("添加成功", "success");
              that.editCancel();
            }
          }
        });
      } else {
        that.ajaxJson({
          url: "/channel/channelManage/updateOrEditChannel",
          data: {
            id: that.editInfo.id,
            channelName: that.editInfo.channelName,
            channelAccount: that.editInfo.channelAccount,
            serviceProviderId: that.editInfo.serviceProviderId,
            masterIp: that.editInfo.masterIp,
            signNames: that.signNames.join(",")
          },
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("修改成功", "success");
              that.editCancel();
            }
          }
        });
      }
    },
    //服务商选项
    getServiceList() {
      let that = this;
      that.ajaxJson({
        url: "/channel/service/list",
        success: function(res) {
          if (res.code == "0") {
            let serviceOptions = res.data ? res.data : [];
            serviceOptions.forEach(function(item, index) {
              that.serviceOptions.push({
                value: item.id,
                label: item.serviceProviderName
              });
            });
          }
        }
      });
    },
    //添加签名
    addSign() {
      let that = this;
      let obj = { signName: that.newSign };
      that.signName.push(obj);
      that.newSign = "";
    },
    //删除签名
    delSign(signName) {
      let that = this;
      that.editInfo.signName = that.signName.filter(
        element => element.signName != signName
      );
      that.signName = that.signName.filter(
        element => element.signName != signName
      );
    }
  },
  created() {
    let that = this;
    that.getServiceList();
    if (that.message) {
      that.editInfo = that.message;
      that.signName = that.message.signName;
    }
  }
};
</script>
<style lang="less">
.channel-edit {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
          position: relative;
        }
        .span1:after {
          content: "\2731";
          font-size: 15px;
          width: 10px;
          color: red;
          position: absolute;
          left: 0;
          top: 0;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 30% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
          .sign {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
